<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .rating-container {
            display: flex;
            align-items: center;
            font-size: 24px;
        }

        .rating-value {
            color: red;
            margin-right: 5px;
        }

        .stars-outer {
            position: relative;
            display: inline-block;
            font-size: 24px;
            color: #ffcc00;
            /* 星星颜色 */
        }

        .stars-inner {
            position: absolute;
            top: 0;
            left: 0;
            width: 0;
            /* 初始宽度为0，根据评分动态变化 */
            white-space: nowrap;
            overflow: hidden;
            color: #ffcc00;
            /* 实心星星颜色 */
        }

        .stars-cover {
            color: #ccc;
            /* 空心星星的颜色 */
        }
    </style>
</head>

<body>
    <div class="rating-container">
        <span class="rating-value">4.37</span>
        <div class="stars-outer">
            <div class="stars-inner">★★★★★</div>
            <div class="stars-cover">☆☆☆☆☆</div>
        </div>
    </div>

</body>

<script>
    document.addEventListener("DOMContentLoaded", function () {
        const rating = 4.37; // 你的评分
        const starsInner = document.querySelector(".stars-inner");

        // 计算百分比（满分是5）
        const starPercentage = (rating / 5) * 100;
        starsInner.style.width = `${starPercentage}%`;
    });


</script>

</html>